<template>
  <div class="calendar-btns">
    <div class="calendar-prev" @click="prevDay">昨天</div>
    <div class="calendar-now" @click="changeVisible(true)">
      {{ selectedDayStr }}
    </div>
    <div class="calendar-next" @click="nextDay">明天</div>
  </div>
  <el-dialog
    custom-class="calendar-dialog"
    v-model="visible"
    width="90%"
    :center="true"
  >
    <div class="dialog-title">
      <div class="calendar-prev_month" @click="prevMonth">上个月</div>
      <div class="calendar-now_month">{{ year }}年{{ month + 1 }}月</div>
      <div class="calendar-next_month" @click="nextMonth">下个月</div>
      <!-- <div class="dialog-close" @click="hideDialog">X</div> -->
    </div>
    <div>
      <div class="dialog-table">
        <table>
          <tr>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
            <td>六</td>
            <td>日</td>
          </tr>
          <tr v-for="(week, index) in monthDays" :key="index">
            <td
              v-for="(day, index) in week"
              :key="index"
              @click="selectDate(day.label, day)"
              :class="{ today: day.isToday, selected: day.isSelected }"
            >
              <div>
                {{ day.label }}
              </div>
            </td>
          </tr>
        </table>
        <div class="goToday" @click="backToday">回到今天</div>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { computed, onMounted, reactive, Ref, ref, watch } from "vue";
export default {
  name: "MyCalendar",
  emits: ["date-change"],
  setup(props, context) {
    let visible = ref(false);
    function changeVisible(value: boolean) {
      visible.value = value;
    }
    watch(visible, (n, o) => {
      if (n === true) {
        month.value = selectedDay.value.getMonth();
        year.value = selectedDay.value.getFullYear();
        calcDays(year.value, month.value);
      }
    });

    let today = ref(new Date());
    function nextDay() {
      selectedDay.value = new Date(
        selectedDay.value.getTime() + 24 * 60 * 60 * 1000
      );
    }
    function prevDay() {
      selectedDay.value = new Date(
        selectedDay.value.getTime() - 24 * 60 * 60 * 1000
      );
    }

    let year = ref(today.value.getFullYear());
    let month = ref(today.value.getMonth()); // 0- 11
    function nextMonth() {
      if (month.value === 11) {
        month.value = 0;
        year.value += 1;
        calcDays(year.value, month.value);
      } else {
        month.value += 1;
        calcDays(year.value, month.value);
      }
    }
    function prevMonth() {
      if (month.value === 0) {
        month.value = 11;
        year.value -= 1;
        calcDays(year.value, month.value);
      } else {
        month.value -= 1;
        calcDays(year.value, month.value);
      }
    }

    let selectedDay = ref(new Date());
    let monthDays = ref();
    let selectedDayStr = computed(() => {
      let v = selectedDay.value;
      return (
        v.getFullYear() + "年" + (v.getMonth() + 1) + "月" + v.getDate() + "日"
      );
    });
    watch(selectedDay, (n, o) => {
      context.emit("date-change", n);
    });
    function selectDate(date: number) {
      console.log(date);
      changeVisible(false);
      selectedDay.value = new Date(year.value, month.value, date);
    }
    function calcDays(year?: number, month?: number) {
      console.log(year, month);
      let date = new Date();
      year = year ? year : date.getFullYear();
      month = month ? month : date.getMonth();
      let firstDay = new Date(year, month, 1);
      // console.log(firstDay.toLocaleString())
      let weekday = firstDay.getDay() == 0 ? 7 : firstDay.getDay();
      let days = new Date(year, month + 1, 0).getDate();

      let daysArr = [];
      let tmpArr = [];
      for (let i = 1; i < weekday; i++) {
        tmpArr.push({
          label: "",
          isToday: false,
          isSelected: false,
        });
      }
      let nowYear = today.value.getFullYear();
      let nowMonth = today.value.getMonth();
      let nowDate = today.value.getDate();
      let selectedYear = selectedDay.value.getFullYear();
      let selectedMonth = selectedDay.value.getMonth();
      let selectedDate = selectedDay.value.getDate();
      let dayFun;
      if (
        year === nowYear &&
        month === nowMonth &&
        year === selectedYear &&
        month === selectedMonth
      ) {
        dayFun = (d: number) => {
          return {
            label: d,
            isToday: d === nowDate,
            isSelected: d === selectedDate,
          };
        };
      } else if (year === nowYear && month === nowMonth) {
        dayFun = (d: number) => {
          return { label: d, isToday: d === nowDate, isSelected: false };
        };
      } else if (year === selectedYear && month === selectedMonth) {
        dayFun = (d: number) => {
          return { label: d, isToday: false, isSelected: d === selectedDate };
        };
      } else {
        dayFun = (d: number) => {
          return { label: d, isToday: false, isSelected: false };
        };
      }
      for (let j = 1; j <= days; j++) {
        tmpArr.push(dayFun(j));
        if (tmpArr.length === 7) {
          daysArr.push(tmpArr);
          tmpArr = [];
        }
      }
      if (tmpArr.length > 0) {
        daysArr.push(tmpArr);
      }
      console.log(daysArr);
      monthDays.value = daysArr;
    }
    function backToday() {
      changeVisible(false);
      selectedDay.value = new Date();
    }
    onMounted(() => {
      calcDays();
    });

    return {
      prevDay,
      changeVisible,
      selectedDayStr,
      nextDay,
      prevMonth,
      year,
      month,
      nextMonth,
      monthDays,
      selectDate,
      backToday,
      visible,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../util/util.scss";
.calendar-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: pxW(20) 0;

  .calendar-prev,
  .calendar-now,
  .calendar-next {
    font-size: pxW(36);
    margin: 0 pxW(20);
  }
}

.calendar-prev_month,
.calendar-next_month,
.calendar-now_month {
  font-size: pxW(36);
  margin: 0 pxW(20);
}
.calendar-dialog {
  .dialog-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: pxW(30);
  }
  .goToday {
    margin-top: pxW(20);
    text-align: center;
  }
  .dialog-table table {
    width: 100%;
    text-align: center;

    td {
      height: pxW(70);
      text-align: center;
      line-height: pxW(70);
      font-size: pxW(36);
    }
  }
  .dialog-table .selected {
    color: #fff;
    background-color: #409eff;
  }

  .dialog-table .today {
    font-weight: bold;
    color: #409eff;
    background-color: transparent;
  }
}
</style>